<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .title {
            padding: 20px;
            font-size: 20px;
        }

        .list {
            display: flex;
            justify-content: space-around;
            align-items: center;
        }

        .list input {
            width: 90%;
            line-height: 30px;
            border-radius: 20px;
            border: transparent;
            background-color: #ccc;
        }

        .list .one {
            color: rgb(0, 157, 255);
        }
        .right .righton{
            padding: 20px;
            display: flex;
            justify-content: space-between;
        }
        .righton{
            display: flex;
            justify-content: space-between;
            padding: 15px 0;
          
        }
        .tiantian{
            display: inline-block;
            height: 25px;
            line-height: 25px;
            padding: 0 20px;
            margin-top: 5px;
            margin-left: 20px;
            background-color:#ccc
        }
        .faxian{
           float: left;
           padding: 20px;
        }
        .mala{
            display: inline-block;
            height: 25px;
            line-height: 25px;
            margin-right: 5px;
            padding: 0 10px;
            margin-top: 5px;
            background-color: rgb(223, 223, 223);}
    </style>

</head>

<body>
    <div id="app">
        <div class="title">
            < <span>搜索</span>
        </div>
        <div class="list">
            <input type="text" placeholder="搜索商家，商品名称" v-model="inputtext">
            <div class="one" @click="goods()">搜索</div>
        </div>
        <div class="right">
            <div class="righton">
                <h4>历史搜索</h4>
                <div class="qin" @click="teone()">清空</div>
            </div>
            <div class="tiantian" v-for="(item,index) in tasklist">{{item}}</div>
        </div>
        <div class="faxian">
                <h4>搜索发现</h4>
            <div class="mala" v-for="(item,index) in goodslist">{{item}}</div>
        </div>
    </div>
</body>

</html>
<script src="./vue-2.5.21.js"></script>
<script>
var v=new Vue({
    el:'#app',
    data:{
        tasklist:['天天鲜挪威三文鱼(立水桥店)'],
        goodslist: ['麻辣烫','米线','披萨','蛋糕','汉堡','腊八粥','烤肉拌饭','炸鸡','味多美(揭阳路店)']
    },
    methods:{
        goods(){
            if(this.inputtext){
                this.tasklist.push(this.inputtext)
                this.inputtext=''
            }
        },
        teone(){
            this.tasklist=[]
        }
    }
})
</script>